<%--
  Created by IntelliJ IDEA.
  User: Song
  Date: 16-1-7
  Time: 上午11:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户详细信息</title>
</head>
<body>
<div>
    <h3>用户名：${username} 的详细信息<h3>
</div>
<div id="VueMain">
    <!--Nav tabs-->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#myHouse" aria-controls="home" role="tab"
                                                  data-toggle="tab">我的度假屋</a>
        </li>
        <li role="presentation"><a href="#Booting" aria-controls="Booting" v-on:click="searchBooting('${username}')"
                                   role="tab" data-toggle="tab">预定</a></li>
        <li role="presentation"><a href="#RentOut" aria-controls="RentOut" v-on:click="searchRentOut('${username}')"
                                   role="tab" data-toggle="tab">短租（出）</a></li>
        <li role="presentation"><a href="#RentIn" aria-controls="RentIn" v-on:click="searchRentIn('${username}')"
                                   role="tab" data-toggle="tab">短租（入）</a></li>
        <li role="presentation"><a href="#Exchanging" aria-controls="Exchanging"
                                   v-on:click="searchExchangingHouse('${username}')" role="tab"
                                   data-toggle="tab">交换（出）</a>
        </li>
        <li role="presentation"><a href="#Exchange" aria-controls="Exchange"
                                   v-on:click="searchExchangeHouse('${username}')" role="tab"
                                   data-toggle="tab">交换（入）</a>
        </li>
    </ul>

    <!--Tab pannes-->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="myHouse">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>房屋类型</th>
                    <th>房屋名称</th>
                    <th>周次</th>
                    <th>价格</th>
                    <th>所在市</th>
                    <th>购买数量</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${myHouseDTOs}" var="myHouseDTO">
                    <tr>
                        <td>${myHouseDTO.houseInfoDTO.title}</td>
                        <td>${myHouseDTO.houseInfoDTO.name}</td>
                        <td>${myHouseDTO.houseWeekDTO.name}</td>
                        <td>${myHouseDTO.houseWeekDTO.price}</td>
                        <td>${myHouseDTO.houseWeekDTO.houseBaseArea}</td>
                        <td>${myHouseDTO.buyNum}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="Booting">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>房屋名称</th>
                    <th>周次</th>
                    <th>预定时间</th>
                    <th>入住人</th>
                    <th>性别</th>
                    <th>身份证</th>
                    <th>电话号码</th>
                    <th>同行人数</th>
                    <th>预定状态</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in boots">
                    <td>{{i.houseBaseName}}</td>
                    <td>{{i.houseWeekDTO.name}}</td>
                    <td>{{i.reserveDate}}</td>
                    <td>{{i.occupancyName}}</td>
                    <td>{{i.gender}}</td>
                    <td>{{i.idcard}}</td>
                    <td>{{i.phoneNum}}</td>
                    <td>{{i.peers}}</td>
                    <td>{{ i.status != 'notReserve'? '是' : '否'}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="RentOut">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>房屋名称</th>
                    <th>周次</th>
                    <th>业主名字</th>
                    <th>业主电话</th>
                    <th>短租状态</th>
                    <th>租客姓名</th>
                    <th>租客电话</th>
                    <th>入住人数</th>
                    <th>入住日期</th>
                    <th>离开日期</th>
                    <th>天数</th>
                    <th>出租价格</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in rentOuts">
                    <td>{{i.houseName}}</td>
                    <td>{{i.houseWeek}}</td>
                    <td>{{i.ownerName}}</td>
                    <td>{{i.ownerPhone}}</td>
                    <td>{{i.myHouseStatus}}</td>
                    <td>{{i.customer}}</td>
                    <td>{{i.phoneNum}}</td>
                    <td>{{i.coustomerNum}}</td>
                    <td>{{ i.checkInDate}}</td>
                    <td>{{i.leaveDate}}</td>
                    <td>{{i.days}}</td>
                    <td>{{ i.price}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="RentIn">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>房屋名称</th>
                    <th>周次</th>
                    <th>业主名字</th>
                    <th>业主电话</th>
                    <th>短租状态</th>
                    <th>租客姓名</th>
                    <th>租客电话</th>
                    <th>入住人数</th>
                    <th>入住日期</th>
                    <th>离开日期</th>
                    <th>天数</th>
                    <th>出租价格</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in rentIns">
                    <td>{{i.houseName}}</td>
                    <td>{{i.houseWeek}}</td>
                    <td>{{i.ownerName}}</td>
                    <td>{{i.ownerPhone}}</td>
                    <td>{{i.myHouseStatus}}</td>
                    <td>{{i.customer}}</td>
                    <td>{{i.phoneNum}}</td>
                    <td>{{i.coustomerNum}}</td>
                    <td>{{i.checkInDate}}</td>
                    <td>{{i.leaveDate}}</td>
                    <td>{{i.days}}</td>
                    <td>{{i.price}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="Exchanging">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>度假屋名称</th>
                    <th>周次</th>
                    <th>价格</th>
                    <th>度假屋状态</th>
                    <th>是（否）为交换房</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in exchangingHouses">
                    <td>{{i.houseInfoDTO.name}}</td>
                    <td>{{i.houseWeekDTO.name}}</td>
                    <td>{{i.houseWeekDTO.price}}</td>
                    <td>{{i.myHouseStatus}}</td>
                    <td>{{i.exchangeHouse == 'true' ? '是': '否'}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="Exchange">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>度假屋名称</th>
                    <th>周次</th>
                    <th>价格</th>
                    <th>度假屋状态</th>
                    <th>是（否）为交换房</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="i in exchangeHouses">
                    <td>{{i.houseInfoDTO.name}}</td>
                    <td>{{i.houseWeekDTO.name}}</td>
                    <td>{{i.houseWeekDTO.price}}</td>
                    <td>{{i.myHouseStatus}}</td>
                    <td>{{i.exchangeHouse == 'true' ? '是': '否'}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        el: "#VueMain",
        data: {
            boots: [],
            rentOuts: [],
            rentIns: [],
            exchangeHouses: [],
            exchangingHouses: []
        },
        methods: {
            searchBooting: function (username) {
                var $this = this;
                $.ajax({
                    url: "/reserve/searchBooting/" + username,
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        $this.boots = data;
                    }
                })
            },

            searchRentOut: function (username) {
                var $this = this;
                $.ajax({
                    url: "/rentback/searchRentOut/" + username,
                    type: 'get',
                    success: function (data) {
                        $this.rentOuts = data;
                    }
                })
            },

            searchRentIn: function (username) {
                var $this = this;
                $.ajax({
                    url: "/rentback/searchRentIn/" + username,
                    type: 'get',
                    success: function (data) {
                        $this.rentIns = data;
                    }
                })
            },

            searchExchangeHouse: function (username) {
                var $this = this;
                $.ajax({
                    url: "/back/user_info/searchMyExchangeHouse/" + username,
                    type: 'get',
                    success: function (data) {
                        $this.exchangeHouses = data;
                    }
                })
            },

            searchExchangingHouse: function (username) {
                var $this = this;
                $.ajax({
                    url: "/back/user_info/searchMyExchangingHouse/" + username,
                    type: 'get',
                    success: function (data) {
                        $this.exchangingHouses = data;
                    }
                })
            }
        }

    })
</script>
</body>
</html>